<template>
  <div>
    <!-- 首页导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜品管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索框+添加按钮 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getfoodlist()">
            <el-button slot="append" icon="el-icon-search" @click="fuzzyquery"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addfooddialog = true"
            >添加菜品</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格内容 -->
      <el-table :data="cachelist" border style="width: 100%">
        <el-table-column prop="id" label="菜品编号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="name" label="菜品名" width="100" align="center">
        </el-table-column>
        <el-table-column prop="introduce" label="介绍" width="180" align="center">
        </el-table-column>
        <el-table-column prop="picture" label="图片预览" width="150" align="center">
          <template slot-scope="scope"> 
            <img :src="scope.row.picture" width="60" height="50" /> 
          </template>
        </el-table-column>
        <el-table-column prop="stall" label="档口ID" width="140" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.stall }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="系列" width="100" align="center">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="80" align="center">
        </el-table-column>
        <el-table-column prop="num" label="数量" width="80" align="center">
          <p>100</p>
        </el-table-column>
        <el-table-column prop="dishes" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="Editfoods(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deletefoods(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页模块 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[4, 6, 8, 10]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- 添加菜品对话框 -->
    <el-dialog title="添加菜品" :visible.sync="addfooddialog" width="50%" @close="addfoodclose" >
      <el-form :model="addfood" :rules="addrules" ref="addfoodref" label-width="90px">
<!--         <el-container> 
          <el-aside width="250px"> 
            <template> 
            <img src="~@/assets/上传图片.png"
             width="100%" height="80%"/> 
          </template>
          <div class="dvb">
              <el-input type="file" :value="dape.file" v-model="dape.file" name="file" accept="image/*" style="width: 42%;align: center"></el-input>
          </div>
          </el-aside> 
          <el-main> -->
            <el-row>
              <el-col :span="11">
                <el-form-item label="菜品名" prop="name"> 
                  <el-input v-model="addfood.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="菜品系列" prop="type">
                  <el-input v-model="addfood.type"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="归属档口" prop="stall">
              <el-select v-model="addfood.stall" placeholder="请选择">
                <el-option v-for="item in stalllist" :key="item.s_id" :label="item.s_name" :value="item.s_id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="图片地址" prop="picture">
              <el-input v-model="addfood.picture"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="10">
                <el-form-item label="价格" prop="price">
                <el-input  type="number" v-model="addfood.price" :precision="2" :step="0.1" :max="20" :min="0"></el-input>
            </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="数量" prop="num">
              <el-input type="number" v-model.number="addfood.num" :step="1" :min="0"></el-input>
            </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="介绍" prop="introduce">
              <el-input type="textarea" v-model="addfood.introduce"></el-input>
            </el-form-item>
 <!--          </el-main> 
        </el-container> -->
      </el-form>
      <el-row :gutter="20">
        <el-col :span="6" :offset="7">
          <el-button @click="addfooddialog = false">取 消</el-button>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-button type="primary" @click="addfoodfrom(addfood)">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 修改菜品对话框 -->
    <el-dialog title="修改菜品" :visible.sync="editfooddialog" width="50%" @close="editfoodclose">
      <el-form :model="editfood" :rules="editfoodrules" ref="editFromref" label-width="100px">
        <el-form-item label="菜品编号">
          <el-input v-model="editfood.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="菜品名">
          <el-input v-model="editfood.name" ></el-input>
        </el-form-item>
        <el-form-item label="归属档口" prop="location">
          <el-select v-model="editfood.stall" placeholder="请选择">
            <el-option v-for="item in stalllist" :key="item.s_id" :label="item.s_name" :value="item.s_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model.number="editfood.price"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="amount">
          <el-input v-model.number="editfood.num"></el-input>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="6" :offset="7">
          <el-button @click="editfooddialog = false">取 消</el-button>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-button type="primary" @click="editfoodsdf(editfood)">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    var checknumber = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('内容不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 0) {
              callback(new Error('数值必须大于0'));
            } else {
              callback();
            }
          }
        }, );
      };
    return{
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 4,
      },
      total: 4,
      addfooddialog:false,
      editfooddialog:false,
      dape:{
        file:''
      },
      editfood:{},
      editfood2:{},
      addfood:{
          name:"",
          stall:"",
          type:"",
          price:"",
          num:"",
          picture:"",
          introduce:""
      },
      addfood2:{},
      addrules:{
        name:[
          { required: true, message: "请输入菜品名", trigger: "blur" },
          { min: 2, max: 8, message: "菜品名的长度在2~8个字符之间", trigger: "blur"},
        ],
        stall: [
            { required: true, message: '请选择档口归属', trigger: 'change' }
        ],
        type:[
          { required: true, message: '请输入菜品系列', trigger: "blur" }
        ],
        picture:[
          { required: true, message: '请输入图片地址', trigger: "blur" }
        ],
        price:[
          { required: true, message: '请输入价格', trigger: "blur" }
        ],
        num:[
          { required: true, message: '请输入数量', trigger: "blur" }
        ],
        introduce:[
          { required: true, message: '请输入菜品介绍', trigger: "blur" }
        ],
      },
      editfoodrules:{
/*         location:[
          { required: true, message: "请输入菜品归属", trigger: "blur" },
          { min: 5, max: 8, message: "菜品归属的长度在5~8个字符之间", trigger: "blur"},
        ],
        price:[
          { validator: checknumber, trigger: 'blur' }
        ],
        amount:[
          { validator: checknumber, trigger: 'blur' }
        ] */
      },
      cachelist:[],
      foodlist:[],
      stalllist:[]
    }
  },
  //界面创建时的调用函数
  created(){
    this.getfoodlist()
  },
  methods:{
    //模糊查询
    fuzzyquery(){
      // this.cachelist=[]
      this.foodlist=[]
      let fuzzy = this.queryInfo.query
      console.log(fuzzy)
      if(fuzzy == ""){
        this.getfoodlist()
      }else{
        this.$http.get('http://localhost:8090/food/findFoodByName?name='+fuzzy).then(response => {
          this.foodlist=response.data
          console.log(this.foodlist)
          this.total=this.foodlist.length
          this.pagingdisplay(this.total,this.queryInfo.pagenum,this.queryInfo.pagesize)
        }, response => {
            console.log("error");
        });
      }
    },

    //获取菜品列表
    getfoodlist(){
      this.$http.get('http://localhost:8090/food/findFoodAll').then(response => {
            //console.log(response.data)
            this.foodlist=response.data
            this.total=this.foodlist.length
            this.pagingdisplay(this.total,this.queryInfo.pagenum,this.queryInfo.pagesize)
        }, response => {
            console.log("error");
        });
      this.$http.get('http://localhost:8090/stall/findStallsName').then(response1 => {
            this.stalllist=response1.data
        }, response => {
            console.log("error");
        });

    },

    //分页显示函数
    pagingdisplay(total,pagenum,pagesize){
      this.cachelist=[]
      let p=(pagenum-1)*pagesize
      let o=pagenum*pagesize
      let j=0
      if(o<=this.total){
        for(let i=p;i<o;i++){
        this.cachelist[j]=this.foodlist[i]
        j++
        }
      }
      else{
        for(let i=p;i<this.total;i++){
        this.cachelist[j]=this.foodlist[i]
        j++
        }
      }
    },
    
    //每页显示条数
    handleSizeChange(newsize) {
      this.queryInfo.pagesize = newsize;
      this.queryInfo.pagenum = 1
      this.pagingdisplay(this.total,this.queryInfo.pagenum,this.queryInfo.pagesize)
    },
    
    //当前页变动
    handleCurrentChange(newnum) {
      this.queryInfo.pagenum = newnum;
      this.pagingdisplay(this.total,this.queryInfo.pagenum,this.queryInfo.pagesize)
    },
    
    //添加对话框关闭事件
    addfoodclose(){
      this.$refs.addfoodref.resetFields();
    },

    //添加菜品
    addfoodfrom(addfood){
      this.$refs.addfoodref.validate((valid) => {
        if (!valid) return;
      this.addfood2=addfood
      console.log(this.addfood2.num)
      console.log(this.addfood2.name)
      let string='name='+this.addfood2.name+'&num='+this.addfood2.num+'&type='+this.addfood2.type+'&stall='+this.addfood2.stall+'&price='+this.addfood2.price+'&introduce='+this.addfood2.introduce+'&picture='+this.addfood2.picture
      console.log(string)
      this.$http.post('http://localhost:8090/food/insertFood?'+string).then(response => {
        console.log("可以")
        this.getfoodlist()
        }, response => {
            console.log("error");
        });

        this.$http.post('http://localhost:8090/food/updateStallForSearch?stall='+this.addfood2.stall+'&type='+this.addfood2.type).then(response => {
          console.log("可以")
          }, response => {
            console.log("error");
        });
      this.$message.success("添加档口成功！");
      this.addfooddialog = false;
      this.getfoodlist()
      });
    },

    //点击编辑按钮时，系统重新查询表格信息
    Editfoods(id){
      this.$http.get('http://localhost:8090/food/selectFoodById?id='+id).then(response => {
        this.editfood = response.data;
        console.log(this.editfood);
        this.editfooddialog = true;
        }, response => {
            console.log("error");
        });

    },

    //当编辑窗口关闭时
    editfoodclose(){
      this.$refs.editFromref.resetFields()
    },

    //提交修改信息
    editfoodsdf(data){
      this.$refs.editFromref.validate((valid) => {
        if (!valid) return;
        this.editfood2 = data
        let string = 'id='+this.editfood2.id+'&name='+this.editfood2.name+'&num='+this.editfood2.num+'&type='+this.editfood2.type+'&stall='+this.editfood2.stall+'&price='+this.editfood2.price+'&introduce='+this.editfood2.introduce
        console.log(string)
        //发起修改请求
        this.$http.post('http://localhost:8090/food/upDateFoodById?'+string).then(response => {
        console.log("可以")
        this.getfoodlist()
        }, response => {
            console.log("error");
        });
        this.$message.success("修改菜品成功！");
        this.editfooddialog = false;
      });
    },

    async deletefoods(id) {
       const confirmResult = await this.$confirm(
        '此操作将删除该菜品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      console.log(id);
      this.$http.get('http://localhost:8090/food/deleteFoodById?id='+id).then(response => {
        this.$message.success('删除菜品成功！')
        this.getfoodlist()
      }, response => {
        console.log("error");
        this.$message.success('删除菜品失败！')
        });
    },
  }
}
</script>
<style lang="less" scoped>
.dvb{
  text-align: center;
}
.dialog-footer{
  text-align: center;
}
</style>